<template>
  <div class="hot-list">
    <sort-bar>
      <template v-slot:left>
        <div class="rec-title">
          <img src="@/assets/img/index.png" alt />
          热门推荐
        </div>
      </template>
      <template v-slot:center>
        <ul v-if="hotPlaylist" @click="toPlaylist">
          <li>
            {{hotPlaylist[0].name}}
            <span>|</span>
          </li>
          <li>
            {{hotPlaylist[1].name}}
            <span>|</span>
          </li>
          <li>
            {{hotPlaylist[2].name}}
            <span>|</span>
          </li>
          <li>
            {{hotPlaylist[3].name}}
            <span>|</span>
          </li>
          <li>{{hotPlaylist[4].name}}</li>
        </ul>
      </template>
      <template v-slot:right>
        <div class="right" @click="toPlaylist">更多&nbsp;&gt;</div>
      </template>
    </sort-bar>
    <div class="container">
      <loader v-if="!hotPlay"></loader>
      <div class="hot-play" v-else>
        <div
          class="hot-play-item"
          v-for="item in hotPlay"
          :key="item.index"
          @click="toPlayListItem(item.id)"
        >
          <div class="img">
            <img :src="item.picUrl" :alt="item.name" :title="item.name" />
            <div class="listen">
              <img src="@/assets/img/listen.png" alt="listen" />
              {{item.playCount | count}}
              <img src="@/assets/img/play.png" alt="play" />
            </div>
          </div>
          <div class="title">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Loader from "@/components/common/loader/Loader";

import SortBar from "@/components/content/sortbar/SortBar";

export default {
  components: {
    Loader,
    SortBar
  },
  props: {
    hotPlaylist: {
      type: Array,
      default() {
        return []
      }
    },
    hotPlay: {
      type: Array,
      default() {
        return []
      }
    }
  },
  filters: {
    count(num) {
      return num / 10000 > 10 ? parseInt(num / 10000) + '万' : num
    }
  },
  methods: {
    // 点击更多前往歌单页
    toPlaylist() {
      this.$router.push('/discover/playlist')
    },
    // 点击歌单前往对应的歌单
    toPlayListItem(id) {
      this.$router.push('/discover/playlist/detail?id=' + id)
    }
  }
};
</script>

<style lang="less" scoped>
.hot-list {
  margin-bottom: 30px;
}
.container {
  height: 460px;
}
/* sortbar */
.rec-title {
  display: flex;
  align-items: center;
}
.rec-title img {
  height: 14px;
  width: 14px;
  margin-right: 5px;
}

/* sortbar里歌单分类 */
ul li {
  float: left;
  cursor: pointer;
}
span {
  font-size: 12px;
  margin: 0 10px;
}
.right {
  cursor: pointer;
}

/* 歌单 */
.hot-play {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.hot-play-item {
  cursor: pointer;
  width: 140px;
  margin: 30px 2px 0;
}

.hot-play-item .title {
  color: #fff;
  line-height: 20px;
  font-size: 13px;
  width: 140px;
  margin: 10px 0;
}

/* 图片 */
.img {
  position: relative;
  width: 140px;
  height: 140px;
}
.img img {
  width: 140px;
  height: 140px;
}

/* 图片下的信息 */
.listen {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 0;
  color: #fff;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  background-color: rgba(0, 0, 0, 0.6);
}
.listen img {
  margin: 0 3px 0 5px;
  width: 20px;
  height: 20px;
}
.listen img:nth-child(2) {
  position: absolute;
  right: 5px;
}
</style>